<template>
  <div class="title_box">
    <div class="title">
      <!-- <div class="mainColor main_title">ᠦᠰᠦᠭ ᠠᠯᠤᠰᠯᠠᠭᠰᠠᠨ ᠤᠳᠭ᠎ᠠ᠎ᠶᠢᠨ ᠨᠡᠩᠵᠢᠯᠲᠡ ᠪᠠ ᠬᠣᠯᠪᠤᠭᠳᠠᠯᠲᠤ ᠲᠠᠨᠢᠯᠴᠠᠭᠤᠯᠭ᠎ᠠ᠎ᠶᠢᠨ ᠬᠡᠷᠡᠭᠯᠡᠭᠡᠨ᠎ᠦ ᠱᠢᠰᠲᠧᠮ</div> -->
      <div class="mainColor main_title">ᠬᠡᠯᠡ ᠠᠯᠤᠰᠯᠠᠭᠰᠠᠨ ᠤᠳᠭ᠎ᠠ ᠬᠠᠢᠯᠲᠠ ᠪᠠ ᠬᠣᠯᠪᠤᠭᠠᠲᠤ ᠵᠥᠪᠯᠡᠮᠵᠢ᠎ᠶᠢᠨ ᠱᠢᠰᠲᠧᠮ</div>
      
      <div class="mainColor er_title">ᠨᠤᠮ ᠬᠠᠢᠬᠤ</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TitleCom',
  data() {
    return {

    }
  }
}
</script>

<style lang="less" scoped>
  .title_box {
    width: 100px;
    height: 630px;
    margin-top: 0px;
    writing-mode: vertical-lr;

    .title {
      width: 100%;
      overflow: hidden;
      position: relative;
      padding: 5px;
      // border: 1px solid #000;

      .main_title, .er_title {
        float: left;
        font-family: "gltTig";
      }
      .main_title {
        // padding: 10px 5px;
        height: 630px !important;
        font-size: 35px;
        font-weight: 700;
        // border: 1px solid #000;
      }
      .er_title {
        position: absolute;
        top: 530px;
        left: 62px;
        bottom: 180px;
        height: 400px;
        font-size: 26px;
        font-weight: 600;
        z-index: 999999;
        // border: 1px solid #000;
      }
    }
  }

  @media screen and (min-width: 1800px) {
    .main_title {
      height: 630px !important;
      font-size: 35px;
      font-weight: 700;
    }
    .er_title {
      position: absolute;
      top: 530px;
      left: 55px !important;
      bottom: 180px;
      height: 400px;
      font-size: 26px;
      font-weight: 600;
      z-index: 999999;
    }
  }

  @media screen and (max-width: 1799px) and (min-width: 1600px) {
    .main_title {
      height: 430px !important;
      font-size: 30px !important;
      font-weight: 600;
    }
    .er_title {
      position: absolute;
      top: 530px;
      left: 42px !important;
      bottom: 180px;
      height: 400px;
      font-size: 26px !important;
      font-weight: 500 !important;
      z-index: 999999;
    }
  }

  @media screen and (max-width: 1599px) and (min-width: 1400px) {
    .main_title {
      height: 430px !important;
      font-size: 30px !important;
      font-weight: 600;
    }
    .er_title {
      position: absolute;
      top: 530px;
      left: 55px !important;
      bottom: 180px;
      height: 400px;
      font-size: 26px !important;
      font-weight: 500 !important;
      z-index: 999999;
    }
  }

  @media screen and (max-width: 1399px) and (min-width: 1200px) {
    .main_title {
      height: 430px !important;
      font-size: 28px !important;
      font-weight: 600;
    }
    .er_title {
      position: absolute;
      top: 530px;
      left: 32px !important;
      bottom: 180px;
      height: 400px;
      font-size: 24px !important;
      font-weight: 500 !important;
      z-index: 999999;
    }
  }

  @media screen and (max-width: 1199px) and (min-width: 1000px) {
    .title_box { width: 60px !important; }
    .main_title {
      height: 400px !important;
      font-size: 26px !important;
      font-weight: 600;
    }
    .er_title {
      position: absolute;
      top: 530px;
      left: 22px !important;
      bottom: 180px;
      height: 400px;
      font-size: 22px !important;
      font-weight: 500 !important;
      z-index: 999999;
    }
  }

  @media screen and (max-width: 999px) and (min-width: 992px) {
    .main_title {
      height: 430px !important;
      font-size: 24px !important;
      font-weight: 600;
    }
    .er_title {
      position: absolute;
      top: 530px;
      left: 12px !important;
      bottom: 180px;
      height: 400px;
      font-size: 20px !important;
      font-weight: 500 !important;
      z-index: 999999;
    }
  }
</style>